<template>
  <div class="search">
    <van-search
      v-model="searchVal"
      background="#f699b4"
      shape="round"
      :show-action="isShow"
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
      @focus="onFocus"
      @input="onInput"
    />
    <div class="history" v-if="showHistory">
      <div class="top">
        <span>搜索历史</span>
        <span @click="deleteAll" class="iconfont">&#xe608;</span>
      </div>
      <div
        class="item"
        v-for="(item, index) in searchHistory"
        @click="historySearch(item)"
        :key="index"
      >
        <span class="search iconfont">&#xe647;</span>
        <span class="value">{{ item }}</span>
        <span class="delete iconfont" @click.stop="deleteHis(index)"
          >&#xe605;</span
        >
      </div>
    </div>
    <div class="suggestion" v-else>
      <div class="top">
        <span>联想区域</span>
      </div>
      <div
        class="item"
        v-for="(item, index) in suggestionList"
        @click="suggestionSearch(item, index)"
        :key="index"
      >
        <span class="iconfont">&#xe647;</span>
        <span class="value" v-html="item"></span>
      </div>
    </div>
  </div>
</template>

<script>
import { suggestion } from '@/api/search'
import { getLocalToken, removeLocalToken } from '@/utils/token'
export default {
  data () {
    return {
      searchVal: '',
      isShow: false,
      suggestionList: [],
      searchHistory: [],
      showHistory: true
    }
  },
  created () {
    if (this.$store.state.searchHistory.length === 0) {
      this.searchHistory = JSON.parse(getLocalToken('searchHistory'))
      removeLocalToken('searchHistory')
    } else {
      this.searchHistory = this.$store.state.searchHistory
    }
  },

  methods: {
    // 搜索
    onSearch () {
      if (this.searchVal.trim().length === 0) {
        this.$toast.fail('搜索内容不能为空')
      } else {
        this.$router.push('/home/searchList?keyWord=' + this.searchVal)
        this.$store.commit('addSearchHistory', this.searchVal)
      }
    },
    // 取消按钮
    onCancel () {
      this.isShow = false
    },
    // 搜索框聚焦
    onFocus () {
      this.isShow = true
    },
    // 输入框输入
    onInput () {
      if (this.searchVal.trim().length === 0) {
        this.showHistory = true
      } else {
        this.showHistory = false
        suggestion({
          q: this.searchVal
        }).then(res => {
          this.suggestionList = res.data.options.map(item => {
            return item
              .split(this.searchVal)
              .join(`<span style="color:red">${this.searchVal}</span>`)
          })
          // console.log(this.suggestionList)
        })
      }
    },
    deleteHis (index) {
      this.searchHistory.splice(index, 1)
    },
    // 历史搜索
    historySearch (item) {
      // this.$router.push('/home/searchList?keyWord=' + this.searchVal)

      this.searchVal = item
      this.onSearch()
    },
    // 联想搜索
    suggestionSearch (item, index) {
      this.searchVal = item
      this.$router.push('/home/searchList?keyWord=' + this.searchVal)
    },
    // 清空搜索历史
    deleteAll () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '确定要清除搜索历史吗？'
        })
        .then(() => {
          this.searchHistory = []
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="less" scoped>
.search {
  .history {
    padding: 5px 15px;
    .top {
      span:nth-child(1) {
        font-size: 20px;
        color: #f699b4;
      }
      .iconfont {
        float: right;
        font-size: 25px;
        color: #f699b4;
      }
    }
    .item {
      height: 30px;
      line-height: 30px;
      margin-top: 5px;
      position: relative;
      .iconfont {
        font-size: 20px;
        color: #cccccc;
      }
      .value {
        padding-left: 15px;
        font-size: 20px;
        color: #cccccc;
      }
      .delete {
        position: absolute;
        right: 0;
      }
    }
  }
  .suggestion {
    padding: 5px 15px;
    .top {
      span:nth-child(1) {
        font-size: 20px;
        color: #f699b4;
      }
    }
    .item {
      height: 30px;
      line-height: 30px;
      margin-top: 5px;
      overflow: hidden;
      white-space: nowrap;
      .iconfont {
        font-size: 20px;
        color: #cccccc;
      }
      .value {
        padding-left: 15px;
        padding-right: 15px;
        font-size: 20px;
        color: #cccccc;
      }
    }
  }
}
</style>
